<template>
  <div v-show="startWaitTimer > -1 && waitTime" :class="isCard ? 'time_card' : ''">
    <div :class="isCard ? 'cardChatTimers status_deal card_statu_li' : 'chatTimers chat_item system clearfix'">
      <div class="chat_content">
        <span v-text="isCard ? $t('webchat.waitTime') : $t('webchat.visitorWait')"></span>
        <span>{{waitTime}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'WebchatTimer',
    props: {
      isCard: Boolean,
      startWaitTimer: Number,
      startWaitTimerStamp: Number
    },
    data () {
      return {
        waitTime: '',
        interval: ''
      }
    },
    watch: {
      startWaitTimer () {
        this.startInterval()
      },
      startWaitTimerStamp () {
        this.startInterval()
      }
    },
    methods: {
      startInterval () {
        this.waitTime = ''
        this.interval && window.clearInterval(this.interval)
        // 主动会话的时候，座席发起主动会话，然后刷新页面之后，startWaitTimer参数值为null，null > -1值为true，会导致此处判断有问题，微信，微博，小程序，企业微信这四种渠道的会出现
        if (this.startWaitTimer > -1 && this.startWaitTimerStamp > 0) {
          this.interval = window.setInterval(() => {
            let now = new Date().getTime()
            let diff = Math.round((now - this.startWaitTimerStamp) / 1000)
            let waitTotal = this.startWaitTimer + diff
            let minute = Math.floor(waitTotal / 60)
            let second = Math.floor(waitTotal % 60) < 10 ? '0' + Math.floor(waitTotal % 60) : Math.floor(waitTotal % 60)
            this.waitTime = minute + ':' + second
          }, 1000)
        }
      }
    },
    mounted () {
      this.startInterval()
    },
    beforeDestroy () {
      this.waitTime = ''
      window.clearInterval(this.interval)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .chatTimers
    position absolute
    text-align center
    margin-left -110px
    padding 0
    width 220px
    left 50%
    top -28px
    .chat_content
      width 100%
      height 26px
      border-radius: 13px
      text-align center
      display inline-block
      padding 0
      line-height 26px
      background #FBD293
      color $cf-level1
  .card_statu_li.cardChatTimers
    display inline-block
    color $followed-color
    text-align center
    border-radius 4px
  .chat_content
    display inline-block
  .time_card
    display inline-block
</style>
